<template>
    <div>

        <div id="large-header" class="large-header login-page">
			<canvas id="demo-canvas" width="1590" height="711"></canvas>
			<div class="login-form">
				<div class="login-content">
					<!-- 标题 -->
					<h1 class="title_name">忘记密码</h1>
					<form method="post" role="form" id="form_login" class="login_padding">
						<div class="form-group clearfix">

							<div class="input-group">
								<!-- <div class="input-group-addon">
									<i class="icon_user"></i>
								</div> -->
								<!-- 手机输入框 -->
								<input type="text" class="form-control" name="loginId" id="loginId" placeholder="账号" autocomplete="off" v-model="loginId">
							</div>
						</div>

						<div class="form-group clearfix">

							<div class="input-group">


								<input type="password" class="form-control" name="password" id="password" placeholder="修改密码" autocomplete="off" v-model="loginPassword" show-password>
							</div>

						</div>

						<div class="form-group clearfix">

							<div class="input-group">
								<input type="password" class="form-control" name="Twopassword" id="password" placeholder="再次确认密码" autocomplete="off" v-model="twoPwd">
							</div>

						</div>

                        <!-- 邮箱框 -->
                        <div class="form-group clearfix">
					        <div class="input-group col-lg-8 col-md-8 col-xs-8 myemail">
                                <input type="text" class="form-control text_phone" name="email" id="email" placeholder="电子邮箱验证码" autocomplete="off" v-model="email">
					        </div>
                            <div class="col-lg-4 col-md-4 col-xs-4 fl">
                                <input type="button" id="btn" class="btn_mfyzm" value="获取验证码" @click="Sendpwd(this)" ref="btn">
                                </div>
				        </div>

						<div class="form-group">
							<a href="javascript:;" type="submit" class="btn btn-danger btn-block btn-login"  @click="forgetPwd">
								<!-- <i class="fa fa-sign-in"></i> -->
								确定修改
							</a>
						</div>

						<div class=" textright"><a href="javascript:history.back(-1)" class="forget">记得密码</a></div>

					</form>
				</div>

			</div>
		</div>
        
    </div>
</template>

<script>

import { Message } from 'element-ui';
// import 'bootstrap/dist/css/bootstrap.min.css'
import "../../../assets/login/css.css"
export default {
    data () {
      return {
          
          loginId:'',//用户id
          loginPassword:'',//第一次密码
          twoPwd:'',//第二次密码
          email:'',//邮箱
          forgetPwdUrl:this.pathUrl.forgetPwdUrl,//验证密码邮箱路径
          getCodeUrl:this.pathUrl.getCodeUrl,//获得邮箱验证码
        //   forgetPwdUrl:'http://localhost:3003/api/user/forgetPwd',//验证密码邮箱路径
        //   getCodeUrl:'http://localhost:3003/api/user/getcode',//获得邮箱验证码
      }
    },

    methods: {
        //获取验证码开始
        getCode(){
                this.$axios.post(this.getCodeUrl,{
                loginId:this.loginId,
                            // mail:this.email,
                })
                .then((resule)=>{
                    console.log(resule)
                // console.log(typeof(resule))
                 return resule})
                .catch((r)=>{
                    console.log('发现错误')
                })
            
        },//获取验证码结束

        //修改密码，进行验证
        forgetPwd(){
            console.log(this.loginPassword,this.twoPwd)
            if(typeof(this.loginPassword)=='undefined'||this.loginPassword==""){
                this.open4("请输入密码")
            }
            else if(typeof(this.twoPwd)=='undefined'||this.twoPwd==""){
                this.open4("请输入确认密码")
            }
            else if(this.loginPassword!=this.twoPwd){
                this.open4("两次密码不一致")
            }
            else if(this.email==""){
                this.open4('请输入验证码')
            }
            else{
                this.$axios.post(this.forgetPwdUrl,{
                            loginId:this.loginId,loginPassword:this.loginPassword,code:this.email,
                    })
                .then((resule)=>{
                    console.log(resule)
                    if(resule.data=="验证码错误"){
                        this.open4(resule.data)
                    }
                    else{
                        this.open2(resule.data)
                        this.$router.push({path:'/login'})
                    }

                })                
            }

        },//结束

        //倒计时
        Sendpwd:function Sendpwd(sender) {
            console.log(123456)
            var validCode=true;
            var time=60;//倒计时间
            console.log(time)
            var loginId = $.trim($("#loginId").val());//获取手机号码
            if ($.trim(loginId) == "") {
                this.open4('请填写邮箱地址！');
                $("#loginId").focus();
                return;
            }
            var code=this.$refs.btn;


            if (validCode) {
                validCode=false;
                code.classList.add("msgs1")
                code.setAttribute("disabled",true);
                // code=this.getCode().data //获取验证码


                 this.$axios.post(this.getCodeUrl,{//访问获取消息
                    loginId:this.loginId,
                                    // mail:this.email,
                    })
                    .then((resule)=>{
                        var data=resule.data;
                        console.log(data)
                        if(data=='账号错误'){//账号错误
                            this.open4("请输入正确账号")
                            validCode=true;
                            code.classList.remove("msgs1"),
                            code.removeAttribute("disabled");
                            return 0
                        }
                        else{//账号正确
                            this.open2("邮件发送成功")
                            var t=setInterval(function  () {
                                time--;
                                code.value=(time+"秒");
                                if (time==0) {
                                    clearInterval(t);
                                    code.value=("重新获取");
                                    validCode=true;
                                    code.classList.remove("msgs1")
                                    code.removeAttribute("disabled");
                                }
                            },1000);
                        }
                    // console.log(typeof(resule))
                    })
                    .catch((r)=>{
                        console.log('发现错误')
                    })
                    // if(){}

                }
        },//结束
        open2(message) {
                this.$message({
                showClose: true,
                message,
                type: 'success',
                duration:1500,
                });
            },
            
        open4(message) {
                this.$message({
                showClose: true,
                message: message,
                type: 'error',
                duration:1500,
                });
            },
	},
	created:function(){
		let _this=this;
	    window.Sendpwd=_this.Sendpwd;
	},
	mounted:function(){
		require('../../../assets/login/jquery-1.11.0.min.js');
		require ('../../../assets/login/demo-1.js');

	},
    components: {},
}
</script>

<style scoped>



.large-header {
    position: relative;
    width: 100%;
    background:url(../../../assets/images/bg.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
.logobg_style  {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.login-content {
    position: relative;
    width: 400px;
    z-index: 999;
    height: 450px;
    box-shadow: 0px 3px 6px #333333;
    background: url(../../../assets/images/bg_03.png) repeat;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.title_name {
    color: #ffffff;
    font-weight: bold;
}
.login_padding {
    padding: 15px 40px;
    position: relative;
}
.logobg_style .form-group {
    margin-bottom: 25px;
    display: block;
}
.logobg_style .input-group {
    height: 45px;
    float: left;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.login-form {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.textright {
    height: 35px;
    text-align: right;
}


.logobg_style .form-group {
    margin-bottom: 25px;
    display: block;
}
.logobg_style,.input-group {
    height: 45px;
    float: left;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.fl {
    float: left;
}
.col-xs-4 {
    width: 33.33333333%;
}
.myemail{
    padding: 0;
    width: 66.6667%;
}
.btn_mfyzm{
    height: 38px;
}
</style>